<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

   <div id="app"></div>

   <script src="../../js/react.development.js"></script>
   <script src="../../js/react-dom.development.js"></script>
   <script src="../../js/babel.min.js"></script>


    <script type="text/babel">
        // this 指向
        class Clock extends React.Component{
            constructor(props){
                console.log('constructor');
                super(props)
                //01 state 初始化状态=> 通过this 挂载到组件实例上
                this.state={
                    time:new Date().toLocaleTimeString()
                }

                console.log('constructor',this);
                //go函数=>新的go函数（已经绑定this）=>新的go函数 赋值给 this.go属性上
                // this.go = this.go.bind(this) // this.go = 新的函数（this指向组件实例）
        

                // this.go=()=>{
                //     console.log(this);  // 默认指向undefined
                //     this.setState({ time:new Date().toLocaleTimeString()})
                // }
            }


            // go(){
            //     console.log(this);  // 默认指向undefined
            //     this.setState({ time:new Date().toLocaleTimeString()})
            // }
            
            //es7 新写法
            go=()=>{
                console.log(this);  // 默认指向undefined
                this.setState({ time:new Date().toLocaleTimeString()})
            }
            
            
            render(){
                console.log('render');
                // console.log('render',this); //当前组件实例 也是内部箭头函数的this指向
                return (
                    <div>
                        <h1>Clock</h1>
                        <h3>time:{this.state.time}</h3>
                        {/*0: go 中this指向undefined*/}
                        <button onClick={this.go}>Go0</button>
                        {/*1:每点击就报错： Maximum update depth exceeded.
                         {this.go()} 直接执行函数 不是绑定；
                         this 是组件实例，因为谁调用这个函数 this 就指向谁，this 是当前组件实例
                         this.go()=>go()=>setState=>render=>this.go() 死循环 内存溢出
                        */}
                        <button onClick={1+1}>Go1</button>
                        {/*<button onClick={this.go()}>Go1</button>*/}
                        
                        {/*2：{箭头函数 ： this 指向外围的作用域}
                        问题： 
                        2.1 函数是特殊对象 占用的是堆内存空间；重复声明=>重新开辟新的内存空间=>性能相对差
                        2.2 jsx 元素中 添加了js 逻辑代码=>代码复杂 臃肿=>不好维护
                       */}
                        <button onClick={()=>{
                            console.log('=>',this);
                            this.setState({ time:new Date().toLocaleTimeString()})
                        }}>Go2.1</button>
                        <button onClick={()=>{
                            this.go()
                        }}>Go2.2</button>
                        <button onClick={
                            function(){
                                console.log(this); //undefined
                                this.setState({
                                    time:new Date().toLocaleTimeString()
                                })
                            }
                        }>Go2.3</button>


                        {/*3:手动改变this指向，解决代码混乱问题
                        问题： 重新绑定=>重新生成新的函数=> 占用内存
                        */}
                        <button onClick={this.go.bind(this,'aaa')}>Go3</button>


                        {/*4：一次性绑定
                         执行此阶段 this.go = 函数（已经绑定好this了）
                        */}
                        <button onClick={this.go}>Go4</button>

                        {/*5 : es7 新特性写法*/}
                        <button onClick={this.go}>Go5</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Clock />,document.getElementById('app'))
    </script>
</body>
</html>